<template>
	   <scroll-view scroll-y="true" @scrolltolower="nextPage">
  <view class="tui-skeleton" :style="{paddingBottom:showButton?'136rpx':0}">

    <l-background />

    <summary-card box-shadow="none" :title="`剩余待还(${affiliatedBill})`" border-radius="0" :info="accountInfo" :total-amount="outstanding" />

    <l-tab-bar position="sticky" :active-inx.sync="activeInx" :tabs="tabs" />

    <view class="padding-lr-30">
      <payment-details v-show="!activeInx" ref="list0" :info="info" @getSize="getSize($event,0)" />

      <pending-order v-show="activeInx" ref="list1" :info="info" @getSize="getSize($event,1)" />
    </view>

    <tui-skeleton v-if="showSkeleton" :preload-data="preloadData" />

    <l-bottom-button v-if="showButton" text="确认收款" @click="toPaymentDetail('add')" />

    <safe-area-bottom v-if="showButton" />
	
  </view>
   </scroll-view>
</template>

<script>
import PaymentDetails from '../components/payment-details/payment-details'
import PendingOrder from '../components/pending-order/pending-order'
import { mapGetters, mapMutations } from 'vuex'
import { dateFormat } from '@/common/util'
import { pageHistoricalBill } from '../api'
import { preloadData } from './index'
export default {
  name: 'AccountDetail',
  components: {
    PaymentDetails,
    PendingOrder
  },
  data() {
    return {
      username: '',
      affiliatedBill: '',
      title: '',
      outstanding: '',
      accountInfo: [
        { label: '应还账款(元)', value: 0, fixed: true },
        { label: '已收账款(元)', value: 0, fixed: true }
      ],
      activeInx: 0,
      tabs: [
        { title: '收款明细', size: 0 },
        { title: '挂账订单', size: 0 }
      ],
      info: {},
      showSkeleton: true,
      preloadData
    }
  },
  computed: {
    showButton() {
      return this.auth.includes('creditManagement_collections') && this.outstanding
    },
    ...mapGetters({
      auth: 'auth'
    })
  },
	 //20230815 增加上拉加载
	 onReachBottom(){
		  if(this.activeInx == 1) this.$refs.list1.nextPage()
	 },
  onLoad(e) {
    this.username = e.username
    this.affiliatedBill = e.affiliatedBill
    this.initInfo()
  },
  onShow() {
    this.setPaymentDetail(null)
    if (this.info.username) this.reload()
  },
  onPullDownRefresh() {
    this.reload()
  },
  methods: {
    async initInfo() {
      const [err, res] = await pageHistoricalBill({
        username: this.username,
        current: 1,
        limit: 999
      })
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!res.data.data) list = []
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        if (item.affiliatedBill === this.affiliatedBill) {
          this.info = item
          break
        }
      }
      this.outstanding = this.info.outstanding
      this.accountInfo[0].value = this.info.accounts
      this.accountInfo[1].value = this.info.repayments
      const affiliatedBill = this.info.affiliatedBill.replace('年', '-')
      this.title = affiliatedBill.substring(0, affiliatedBill.indexOf('月'))
    },
    toPaymentDetail() {
      const paymentDate = dateFormat()
      const amountRepaid = this.info.recorded - this.info.repayments
      const obj = {
        id: '',
        affiliatedBill: this.affiliatedBill,
        amountCollected: '',
        payingCustomer: this.username,
        paymentDate,
        paymentMethod: '',
        handler: '',
        invoice: '',
        remarks: '',
        screenshotUrl: '',
        amountRepaid: this.outstanding
      }
      this.setPaymentDetail(obj)
      this.jump('/user/payment-details/payment-details?amountRepaid=' + amountRepaid.toFixed(2) + '&noRecorded=' + this.info.noRecorded.toFixed(2) + '&type=add')
    },
    getSize(e, i) {
      this.showSkeleton = false
      this.tabs[i].size = Number(e)
    },
    reload() {
      this.initInfo()
      this.$refs.list0.reload()
      this.$refs.list1.reload()
    },
    ...mapMutations({
      setPaymentDetail: 'user/setPaymentDetail'
    })
  }
}
</script>

<style scoped>

</style>
